<template>
  <div class="my-content-page">
    <div class="my-nav-cs my-content-page-nav">
      <div v-if="title == '4'" class="my-content-page-nav-title fl">我的提问</div>
      <div v-if="title == '5'" class="my-content-page-nav-title fl">我的回答</div>
      <div v-if="title == '6'" class="my-content-page-nav-title fl">我的文章</div>
      <div v-if="title == '7'" class="my-content-page-nav-title fl">我的收藏</div>
      <div v-if="title == '8'" class="my-content-page-nav-title fl">我的草稿</div>
      <div class="cf"></div>
    </div>
    <div v-for="item in items">
      <div class="my-card-wrap">
        <MainCard :item="item"/>
      </div>
    </div>
    <div v-if="!loading" @click="loadMore" class="my-loading">
      加载更多
    </div>
    <div v-if="loading" class="my-loading">
      正在加载 ......
    </div>
  </div>
</template>
<script>
  import MainCard from '~/components/card/main-card.vue'
  export default {
    data () {
      return {
        loading: false,
        items: [
          {
            id: '1',
            userName: '马可波罗',
            userId: '12',
            type: '1',
            title: '我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，哪位仁兄给我介绍一下？',
            content: '来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事，',
            createTime: '昨天 09:16'
          },
          {
            id: '2',
            userName: '马可波罗*11',
            userId: '12',
            type: '2',
            title: '我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，哪位仁兄给我介绍一下？',
            content: '来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事，',
            createTime: '昨天 09:16'
          },
          {
            id: '3',
            userName: '马可波罗*11',
            userId: '12',
            type: '1',
            title: '我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，哪位仁兄给我介绍一下？',
            content: '来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事，',
            createTime: '昨天 09:16'
          },
          {
            id: '4',
            userName: '马可波罗*11',
            userId: '12',
            type: '1',
            title: '我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，哪位仁兄给我介绍一下？',
            content: '来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事，',
            createTime: '昨天 09:16'
          },
          {
            id: '5',
            userName: '马可波罗*11',
            userId: '12',
            type: '2',
            title: '我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，哪位仁兄给我介绍一下？',
            content: '来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事，',
            createTime: '昨天 09:16'
          }
        ]
      }
    },
    props: ['title'],
    components: {
      MainCard
    },
    methods: {
      loadMore () {
        this.loading = true
        setTimeout(() => {
          let _id = Math.random() + ''
          let _item = {
            id: _id,
            userName: '马可波罗',
            userId: '12',
            type: '1',
            title: '我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，哪位仁兄给我介绍一下？',
            content: '来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，我不太理解中国的本草纲目，来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事。来，来，让朕跟你御言一番，我天朝大国的本草纲目是怎么回事，',
            createTime: '昨天 09:16'
          }
          this.items.push(_item)
          this.loading = false
        }, 3000)
      }
    },
    computed: {}
  }
</script>
<style>

  @media all and (max-width: 766px) {
    .my-nav-cs {
      display: none;
    }
  }
  .my-card-wrap {
    border-bottom: 1px solid #ececec;
    padding-top: 15px;
    padding-bottom: 10px;
  }

  .my-loading {
    color: #ffffff;
    text-align: center;
    font-size: 1.2em;
    height: 35px;
    line-height: 35px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
    background-color: #13BA31;

  }

  @media all and (max-width: 766px) {
    .my-card-wrap {
      font-size: 0.8em !important;
    }

    .my-loading {
      font-size: 1em;
    }
  }
</style>
